<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(245, 245, 245, 1);
            padding-bottom: 50px;
        }

        .vueApp {
            overflow: hidden;
        }

        .m-container-mod {
            margin: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.02);
            border-radius: 8px;
        }

        .c-title {
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            line-height: 20px;
            margin-bottom: 14px;
        }

        .c-radio {
            width: 22px;
            height: 22px;
            min-width: 22px;
            margin-right: 10px;
            margin-left: 40px;
            -webkit-appearance: none;
            background: url("../../image/ui/radio.png");
            background-size: 100% 100%;
        }

        .c-radio:first-child {
            margin-left: 0;
        }

        .c-radio:checked {
            background: url("../../image/ui/checked.png");
            background-size: 100% 100%;
        }

        .c-radio-txt {
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            line-height: 20px;
        }

        .c-textarea {
            width: 100%;
            height: 73px;
            line-height: normal;
        }

        .c-textarea::placeholder {
            font-size: 14px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
            line-height: normal;
        }

        .c-tips {
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            line-height: 20px;
        }

        .o-upload-img {
            position: relative;
            width: 81px;
            height: 81px;
            min-width: 81px;
            border-radius: 4px;
            margin-bottom: 14px;
            margin-right: 14px;
        }

        .c-add {
            width: 20px;
            height: 20px;
        }

        .c-img {
            width: 100%;
            height: 100%;
        }

        .c-close-btn {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 22px;
            height: 22px;
        }

        .m-tips-mod {
            height: 42px;
            margin: 15px auto 0 auto;
            text-align: center;
        }

        .o-tips-flexbox {
            height: 21px;
        }

        .c-tips-icon {
            width: 9px;
            height: 10px;
            margin-bottom: 1px;
            margin-right: 3px;
        }

        .c-tips-content {
            font-size: 13px;
            font-weight: 400;
            color: rgba(253, 155, 67, 1);
            line-height: 21px;
        }

        .btn {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: rgba(90, 194, 255, 1);
            font-size: 16px;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
        }

        .bor {
            border: 1px solid rgb(212, 212, 212);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="m-container-mod">
            <div class="c-title">
                选择售后类型
            </div>
            <div data-flex="cross:center">
                <input class="c-radio" type="radio" :checked="info.type == 1" @click="info.type = 1">
                <div class="c-radio-txt">退款</div>
                <!-- <input class="c-radio" type="radio" :checked="info.type == 3" @click="info.type = 3">
                <div class="c-radio-txt">退货/退款</div> -->
                <input class="c-radio" type="radio" :checked="info.type == 0" @click="info.type = 0">
                <div class="c-radio-txt">换货</div>
            </div>
        </div>
        <div class="m-container-mod">
            <div class="c-title">
                售后说明
            </div>
            <textarea class="c-textarea" v-model="info.description" placeholder="请输入售后说明"></textarea>
        </div>
        <div class="m-container-mod">
            <div class="c-title" data-flex="main:justify">
                <div>上传图片 ({{ info.images.length }}/5)</div>
                <div class="c-tips">选填</div>
            </div>
            <div data-flex="cross:center" style="flex-wrap: wrap">
                <div v-for="item,index in info.images">
                    <div class="o-upload-img" data-flex="main:center cross:center">
                        <img class="c-img" :src="item" alt="">
                        <img class="c-close-btn" src="../../image/ui/close.png" @click="deleteImg(index)" alt="">
                    </div>
                </div>
                <div v-if="info.images.length < 5">
                    <div class="o-upload-img bor" data-flex="main:center cross:center">
                        <img class="c-add" src="../../image/ui/add.png" @click="uploadImg()" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="m-tips-mod">
            <div class="o-tips-flexbox" data-flex="main:center cross:center">
                <img class="c-tips-icon" src="../../image/ui/start_4.png" alt="">
                <div class="c-tips-content">退换货请在退回快递中用小纸条写上订单号</div>
            </div>
            <div class="c-tips-content">以便于我们尽快为您处理退换货服务</div>
        </div>
        <div class="btn" data-flex="main:center cross:center" @click="submitRequest">
            提交
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-pic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var maxUploadCount = 5;
    var currentUploadCount = 0;
    var pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        fnInitAliYunOss();
        pageParam = api.pageParam;
        api.addEventListener({
            name: 'uploadSuccess'
        }, function (ret) {
            // 拿到上传完成后的图片列表
            var imgs = ret.value.imgs;
            vm.info.images = vm.info.images.concat(imgs);
            currentUploadCount = vm.info.images.length;
        })
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                info: {
                    type: 1,
                    description: '',
                    images: []
                }
            }
        });
    }

    function uploadImg() {
        fnUploadImg(maxUploadCount - currentUploadCount, 'uploadSuccess');
    }

    function deleteImg(index) {
        vm.info.images.splice(index, 1);
        currentUploadCount -= 1;
    }	

    // 提交请求
    function submitRequest() {
        if(!vm.info.description) {
            fnToast('售后说明不能为空');
            return;
        };
        var params = {
            // 订单id
            orderId: pageParam.orderId,
            // 商品id
            items: pageParam.items.join(','),
            // 售后类型 0 换货 1 退货 3 退货退款
            type: vm.info.type,
            // 售后说明
            desc: vm.info.description,
            // 图片数组
            images: vm.info.images
        };
        var url = 'single/oms/saveOmsOrderReturnApply';
        var callback = function(data) {
            fnToast('提交成功');
            api.execScript({
                name: pageParam.refreshWin,
                frameName: pageParam.refreshFrm,
                script: 'fnOrderActionCallback();'
            });
            api.closeWin();
        };
        MALLPOSTARRAY(url, params, callback);
    }
</script>

</html>